import React,{useState,useEffect} from 'react'
import { Toast, NavBar,ProductCard, Tag, Button ,Cell, Dialog,  } from 'react-vant';
import { Share } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { useDispatch ,useSelector} from 'react-redux';
import axios  from '../Utils/Request';
import {STORETYPE } from '../Type/Store.d';
import {ADDLISTTYPE,ADDLIST ,ADDCLEAR} from '../Type/AddType.d';
import '../Api/DataList';
import DialogItem from '../Compoment/DialogItem';

function Add() {
    const Navigate = useNavigate();
    const Dispatch = useDispatch();
    const [visible, setVisible] = useState<boolean>(false);
    const [DialogId, setDialogId] = useState<string>('');
    const addlist = useSelector((state:STORETYPE)=>state.AddList) as ADDLIST[]
    useEffect(()=>{
        axios.get('/addlist').then(res=>{
            if(addlist.length<=0){
                Dispatch({
                    type:ADDLISTTYPE,
                    payload:res.data.addlist
                })
            }
            
        })
    },[])
    const onConfirm = ()=>{
        console.log(11);
        Dispatch({
            type:ADDCLEAR,
            payload:DialogId
        })
        setVisible(false);
    }
    let objDialog = {visible, setVisible,onConfirm};
    return (
        <div className='Add'>
            <NavBar
                title="地址列表"
                leftText="返回"
                rightText={<Share  />}
                onClickLeft={() => Navigate(-1)}
                onClickRight={() => Navigate('/NewAdd')}
            />
            <main>
            {
                addlist && addlist.length>0 ? addlist.map((item,index)=>{
                    return <ProductCard key={index}
                            desc={item.city}
                            title={
                                <>
                                    {item.user} : {item.tel}
                                </>
                            }
                            footer={
                                <>
                                <Button size="mini" type="info" round plain style={{ marginRight: 2 }} onClick={()=>{
                                    setVisible(true);
                                    setDialogId(item.id)
                                }}>删除</Button>
                                <Button size="mini" type="warning" round plain onClick={()=>Navigate('/EditAdd/'+item.id,{state:item})}>编辑</Button>
                                </>
                            }
                            />
                }):'暂无数据'
            }
        </main>
        <DialogItem {...objDialog}></DialogItem>
        <Button type="primary" block round onClick={()=>Navigate('/NewAdd')}>+添加地址</Button>
        </div>
    )
}

export default Add